<template>
  <div>
    <Header :isGoBack="false">
      <template v-slot:left>
        <span>单词量测试 <i class="el-icon-arrow-right"></i> 测试中心</span>
      </template>
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="study-center w1200">
      <el-card shadow="never" class="header-content">
        <span class="header-left" id="step1">
          单词测试
        </span>
        <span class="header-right" id="step2">
          针对每个学段进行单词量测试，来检测每个学段您掌握的单词量情况
        </span>
      </el-card>
      <el-card shadow="never" class="content-center">
        <div class="title">测试选项</div>
        <div class="divider"><el-divider></el-divider></div>
        <div class="test-content-option">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item label="测试方式:" prop="type">
              <el-radio-group v-model="ruleForm.type">
                <el-col :span="4">
                  <el-radio :label="24">单元测试</el-radio>
                </el-col>
                <el-col :span="4">
                  <el-radio :label="25">分册测试</el-radio>
                </el-col>
                <!-- <el-col :span="4">
                                    <el-radio :label="3">学年测试</el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio :label="4">学段测试</el-radio>
                                </el-col> -->
                <el-col :span="4">
                  <el-radio :label="26">体验课测试</el-radio>
                </el-col>
                <el-col :span="5">
                  <el-radio :label="27">体验课学段测试</el-radio>
                </el-col>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="测试学段:" prop="period">
              <el-radio-group v-model="ruleForm.period">
                <el-col :span="4">
                  <el-radio :label="1">小学</el-radio>
                </el-col>
                <el-col :span="4">
                  <el-radio :label="2">初中</el-radio>
                </el-col>
                <el-col :span="4">
                  <el-radio
                    v-if="ruleForm.type == 26 || ruleForm.type == 27"
                    :label="3"
                    >高中</el-radio
                  >
                </el-col>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="测试版本:"
              prop="edition"
              v-if="!(ruleForm.type == 26 || ruleForm.type == 27)"
            >
              <el-select
                v-model="ruleForm.edition"
                placeholder="版本选择"
                value-key="name"
                style="width: 414px;"
                @change="handleEdition($event.children, $event.name)"
              >
                <el-option
                  v-for="item in editionOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 测试年级册 -->
            <el-row :gutter="20">
              <el-col
                :span="10"
                v-if="
                  ruleForm.type != 4 &&
                    ruleForm.type != 26 &&
                    ruleForm.type != 27
                "
              >
                <el-form-item label="测试年级册:" prop="grade">
                  <el-select
                    value-key="name"
                    v-model="ruleForm.grade"
                    placeholder="年级册选择"
                    @change="handlegrade($event.children, $event.name)"
                  >
                    <el-option
                      v-for="item in gradeIdOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="10"
                v-if="ruleForm.type == 24 || ruleForm.type == 26"
              >
                <el-form-item label="测试单元:" prop="unitId">
                  <el-select
                    value-key="name"
                    v-model="ruleForm.unitId"
                    placeholder="单元选择"
                    @change="handleUnit($event)"
                  >
                    <el-option
                      v-for="item in unitIdOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="20" v-if="ruleForm.type == 27">
                <el-form-item label="测试年级:" prop="gradeId">
                  <el-select
                    value-key="name"
                    multiple
                    collapse-tags
                    v-model="ruleForm.unitIdList"
                    @change="handleUnit($event)"
                    placeholder="测试年级"
                  >
                    <el-option
                      v-for="item in testGradeOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="测试类型:" prop="genre">
              <el-checkbox-group v-model="ruleForm.genre">
                <el-col :span="4">
                  <el-checkbox :label="1">英译汉</el-checkbox>
                </el-col>
                <el-col :span="4">
                  <el-checkbox
                    :label="2"
                    v-if="!(ruleForm.type == 26 || ruleForm.type == 27)"
                    >汉译英</el-checkbox
                  >
                </el-col>
                <el-col :span="4">
                  <el-checkbox
                    :label="4"
                    v-if="!(ruleForm.type == 26 || ruleForm.type == 27)"
                    >听写</el-checkbox
                  >
                </el-col>
                <el-col :span="4">
                  <el-checkbox
                    :label="5"
                    v-if="!(ruleForm.type == 26 || ruleForm.type == 27)"
                    >默写</el-checkbox
                  >
                </el-col>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              label="题目数量:"
              prop="topicCount"
              v-if="ruleForm.type != 24 && ruleForm.type != 26"
            >
              <el-radio-group v-model="ruleForm.topicCount">
                <el-col :span="4">
                  <el-radio :label="20">20</el-radio>
                </el-col>
                <el-col :span="4">
                  <el-radio :label="50">50</el-radio>
                </el-col>
                <el-col :span="4">
                  <el-radio :label="100">100</el-radio>
                </el-col>
                <el-col :span="4">
                  <el-radio :label="400">150</el-radio>
                </el-col>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div class="submit-box">
            <el-button
              class="submit"
              type="primary"
              :loading="submitStatus"
              @click="submit"
              >开始测试</el-button
            >
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import { getGradeEdition } from "@/api/vocabulary.js";
export default {
  name: "EnglishWebIndex",
  components: {
    Header,
  },
  data() {
    return {
      ruleForm: {
        type: 24,
        period: 1,
        genre: [],
        topicCount: "",
        unitIdList:[]
      },
      rules: {
        type: [{ required: true, message: "请选择测试方式", trigger: "blur" }],
        period: [
          { required: true, message: "请选择测试学段", trigger: "blur" },
        ],
        edition: [
          { required: true, message: "请选择测试版本", trigger: "blur" },
        ],
        grade: [
          { required: true, message: "请选择测试年级册", trigger: "blur" },
        ],
        unitId: [
          { required: true, message: "请选择测试单元", trigger: "blur" },
        ],
        genre: [{ required: true, message: "请选择测试类型", trigger: "blur" }],
        topicCount: [
          { required: true, message: "请选择题目数量", trigger: "blur" },
        ],
      },
      testGradeOption: [],
      editionOptions: [], // 测试版本数组
      gradeIdOptions: [], //测试年级数组
      unitIdOptions: [], // 测试单元数组
      submitStatus: false,
      params: {
        editionName: "",
        gradeName: "",
        unitName: "",
      },
    };
  },
  computed: {
    courseName() {
      if (this.params.unitName) {
        return (
          this.params.editionName +
          this.params.gradeName +
          "-" +
          this.params.unitName
        );
      }
      return this.params.editionName + this.params.gradeName;
    },
  },
  mounted() {},
  watch: {
    "ruleForm.type": {
      handler(newVal, oldVal) {
        this.getGradeEdition();
      },
      immediate: true,
    },
    "ruleForm.period": {
      handler(newVal, oldVal) {
        this.getGradeEdition();
      },
      // immediate: true
    },
  },

  methods: {
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    async getGradeEdition() {
      if (this.ruleForm.edition) {
        this.ruleForm.edition = "";
      }
      if (this.ruleForm.grade) {
        this.ruleForm.grade = "";
      }
      if (this.ruleForm.unitId) {
        this.ruleForm.unitId = "";
      }
      if (this.ruleForm.topicCount) {
        this.ruleForm.topicCount = "";
      }
      const { type, period } = this.ruleForm;
      const { data } = await getGradeEdition({ type, period });
      if (this.ruleForm.type == 26) {
        this.unitIdOptions = data;
        return;
      }
      if (this.ruleForm.type == 27) {
        this.testGradeOption = data;
        return;
      }
      this.editionOptions = data;
    },
    handleEdition(arr, name) {
      this.params.editionName = name;
      if (this.ruleForm.grade) {
        this.ruleForm.grade = "";
      }
      if (this.ruleForm.unitId) {
        this.ruleForm.unitId = "";
      }
      this.gradeIdOptions = arr;
    },
    handlegrade(arr, name) {
      this.params.gradeName = name;
      if (this.ruleForm.unitId) {
        this.ruleForm.unitId = "";
      }
      this.unitIdOptions = arr;
    },
    handleUnit(event) {
      if (this.ruleForm.type == 27) {
        console.log(event);
        this.params.unitName="体验课学段测试"
        // this.params.unitName = this.testGradeOption.find(
        //   (item) => item.id == event
        // ).name;
      } else {
        this.params.unitName = this.unitIdOptions.find(
          (item) => item.id == event
        ).name;
      }
    },
    validrow(data) {
      if (data == null) {
        return false;
      }
      if (
        this.ruleForm.type != 26 &&
        this.ruleForm.type != 27 &&
        !data.edition
      ) {
        this.$message.error("请选择测试版本");
        return false;
      }
      if (
        this.ruleForm.type != 4 &&
        this.ruleForm.type != 26 &&
        this.ruleForm.type != 27 &&
        !data.grade
      ) {
        this.$message.error("请选择测试年级册");
        return false;
      }
      if (
        (this.ruleForm.type == 24 || this.ruleForm.type == 26) &&
        !data.unitId
      ) {
        this.$message.error("请选择测试单元");
        return false;
      }
      if (data.genre.length == 0) {
        this.$message.error("请选择测试类型");
        return false;
      }
      if (
        this.ruleForm.type != 24 &&
        this.ruleForm.type != 26 &&
        !this.ruleForm.topicCount
      ) {
        this.$message.error("请选择题目数量");
        return false;
      }
      return true;
    },
    filterParams(data) {
      const params = {};
      if (data.type) {
        params.type = data.type;
      }
      if (data.period) {
        params.period = data.period;
      }
      if (data.edition) {
        params.editionId = data.edition.id;
      }
      if (data.grade) {
        params.gradeId = data.grade.id;
      }
      if (data.gradeId) {
        params.gradeId = data.gradeId;
      }
      if (data.unitId&&data.type != 27) {
        params.unitIdList = [data.unitId];
      }else{
        params.unitIdList=data.unitIdList
      }
      if (data.genre) {
        params.questionTypeList = data.genre;
      }
      if (data.topicCount) {
        params.totalNum = data.topicCount;
      }
      return params;
    },
    submit() {
      localStorage.removeItem("XGZX_QUESTION_LIST");
      localStorage.removeItem("XGZX_QUESTION_CURRENTTOPIC");
      const flag = this.validrow(this.ruleForm);
      if (flag) {
        this.submitStatus = true;
        const params = Object.assign({}, this.filterParams(this.ruleForm), {
          category: 24,
          source: 25,
        });
        console.log(params);
        this.$router.push({
          name: "vocabularyTest",
          query: {
            orderDetail: JSON.stringify(params),
            dataTime: `${Date.parse(new Date())}`,
            courseName: this.courseName,
          },
        });
        this.submitStatus = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.test-content-option {
  padding: 0 189px;
}
.el-radio-button__inner,
.el-radio-group {
  width: 80%;
}

.submit-box {
  padding: 20px 0 50px;
  text-align: center;

  .submit {
    border: none;
    width: 300px;
    height: 50px;
    // background: #1472FF;
    border-radius: 2px;
  }
}

.header-content {
  height: 81px;
  line-height: 38px;
  border-radius: 8px;
  margin: 16px 0 10px;

  .header-left {
    padding-left: 41px;
    padding-right: 37px;
    font-weight: bold;
    color: #363636;
    font-size: 22px;
  }

  .header-right {
    font-size: 16px;
    color: #363636;
  }
}

.content-center {
  border-radius: 10px;

  .title {
    padding-left: 54px;
    padding-top: 19px;
    font-size: 18px;
    font-weight: 400;
    color: #262626;
  }

  .divider {
    padding-left: 54px;
    width: 1090px;

    .el-divider--horizontal {
      margin: 20px 0;
    }
  }
}
</style>
